<template>
    <div class="content">
        <div class="title">
            <van-icon @click="router.back()" class="icon" size="22px" color="#fff" name="arrow-left" />
        </div>
        <div class="info">
            <div style="font-size: 15px;color: #fff;">{{ $t('賬戶') }}</div>
            <div style="font-size: 14px;color: #a8aeae;margin: 12px 0;">{{ $t('網絡') }}</div>
            <div style="font-size: 14px;color: #a8aeae;margin: 12px 0;">{{ $t('我的地址') }}</div>
            <div style="font-size: 14px;color: #fff;margin: 12px 0;">{{ store.state.user.account }}</div>
        </div>
        <ul>
            <li @click="goto('/logs2')"
                style="display: flex;justify-content: space-between;align-items: center;height: 48px;padding: 12px 0;box-sizing: border-box;">
                <div style="font-size: 15px;color: #fff;">{{ $t('分發記錄') }}</div>
                <van-icon color="#fff" size="20px" name="arrow" />
            </li>
            <li @click="goto('/orders')"
                style="display: flex;justify-content: space-between;align-items: center;height: 48px;padding: 12px 0;box-sizing: border-box;">
                <div style="font-size: 15px;color: #fff;">{{ $t('交易訂單') }}</div>
                <van-icon color="#fff" size="20px" name="arrow" />
            </li>
            <li
                style="display: flex;justify-content: space-between;align-items: center;height: 48px;padding: 12px 0;box-sizing: border-box;">
                <div style="font-size: 15px;color: #fff;">{{ $t('合約訂單') }}</div>
                <van-icon color="#fff" size="20px" name="arrow" />
            </li>
            <li @click="goto('/rewards')"
                style="display: flex;justify-content: space-between;align-items: center;height: 48px;padding: 12px 0;box-sizing: border-box;">
                <div style="font-size: 15px;color: #fff;">{{ $t('我的邀請') }}</div>
                <van-icon color="#fff" size="20px" name="arrow" />
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import store from '@/store';
const router = useRouter()

function goto(url) {
    router.push(url)
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
    background-color: #17171a;
    padding: 0 15px;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 54px;
        padding: 15px 0;
        box-sizing: border-box;

        .text {
            font-size: 15px;
            color: #fff;
        }
    }

    .info {
        width: 100%;
        height: 204px;
        background-color: #2e323b;
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 74px;
    }
}
</style>